<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()

console.log(router.currentRoute.value)
console.log(router.currentRoute.value.params.title)

//获取路由元信息中的标题
const title = computed(() => {
  if (!route.meta) return ''

  return typeof route.meta.Title === 'string' ? route.meta.Title : ''
})

// 返回上一个页面的函数，若没有历史记录则返回首页
const goBack = () => {
  if (window.history.state.back) history.back()
  else router.push('/')
}

// 添加好友
function add(name: string) {
  showDialog({ message: name })
}

function search() {
  router.push({ name: 'search' })
}

// 计算属性：判断左箭头是否显示
const showLeftArrow = computed(() =>
  typeof route.meta.NavBarArrow === 'boolean' ? route.meta.NavBarArrow : false,
)

// 计算属性：判断导航栏是否显示
const showNavBar = computed(() => route.meta.NavBar)
</script>

<template>
  <van-nav-bar
    :fixed="true"
    :title="title"
    placeholder
    :left-arrow="showLeftArrow"
    v-if="showNavBar"
    @click-left="goBack"
  >
    <template #right>
      <van-icon name="search" size="24" style="margin-right: 10px" @click="search()" />
      <van-icon name="add-o" size="24" @click="add('邀请好友!')" />
    </template>
  </van-nav-bar>
</template>

<style lang="less" scoped></style>
